<template>
  <div class="privateContent">
    <div class="title">
      <h3>{{ name }}</h3>
      <a @click="toPrivateContentList">更多></a>
    </div>
    <div class="PrivateContentList">
      <div class="li" v-for="(item, index) in privateContentlist" :key="index" @click="toVideoPage(item.id)">
        <div class="img">
          <img :src="item.sPicUrl" />
          <i class="iconfont icon-circle-video"></i>
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPrivateContent } from '../../../network/playlist.js'
export default {
  data () {
    return {
      name: '',
      privateContentlist: []
    }
  },
  methods: {
    // 独家放送更多入口
    toPrivateContentList () {
      this.$router.push('/private_Content_list')
    },
    // MV播放页面
    toVideoPage (id, type) {
      this.$router.push('/video_player/' + id)
    },
    getPrivateContent () {
      getPrivateContent().then(res => {
        // console.log(res.data)
        this.name = res.data.name
        this.privateContentlist = res.data.result
        // console.log(this.privateContentlist)
      })
    }
  },
  created () {
    this.getPrivateContent()
  }
}
</script>

<style lang="less" scoped>
  .privateContent {
    width: 90%;
    margin: 50px auto;
    box-sizing: border-box;
    .title {
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e1e1e2;
      a {
        cursor: pointer;
      }
    }
    .PrivateContentList {
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
      .li {
        width: 32%;
        .img {
          position: relative;
          width: 100%;
          img {
            width: 100%;
          }
          i {
            color: #fff;
            font-size: 28px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 50%;
            position: absolute;
            top: 3%;
            left: 2%;
          }
          i:hover {
            background: rgba(0, 0, 0, 0.6)
          }
        }
        .name {
          // display: flex;
          // justify-content: flex-start;
        }
      }
    }
  }
</style>
